<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签模板</title>
    <style>
        ul{
            list-style: none;
            border: 1px solid #cccccc;
        }
        ul li:nth-child(odd){
            height: 50px;
            background-color: seagreen;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    // let lession = 'css';
    // let web = '后盾人';
    // tag `访问${web}学习${lession}前端知识`;
    // /**
    //  *定义一个标签函数
    //  *string  当前这段内容所有的字符串   以数组的形式展示
    //  *values  当前这段内容所有的变量     以数组的形式表示
    // */
    // function tag(strings, ...values){
    //     console.log(values)
    // }
    
   
    let lession = [
        {title:"后盾人媒体查询响应式布局",author:"后盾人向军"},
        {title:'FLEX 弹性盒子模型',author:'后盾人'},
        {title:'GRID 格栅系统后盾人教程',author:"顾老师"}
    ];

    //函数标签
    function links(strings,...vars){
        return strings.map((str,key)=>{
            "use strict"
            return (
                str + (vars[key] ? vars[key].replace(
                    "后盾人",`<a href="https://www.houdunren.com">后盾人</a>`
                ) : '')
            );
        }).join(' ');
    }

    function template(){
        return `<ul>
            ${lession.map((item)=>
                links`<li>${item.title}:${item.author}<li>`
            ).join(" ")}
        </ul>`;
    }
    document.body.innerHTML = template();
</script>